<template>
  <van-card
    @click="ship"
    num="1"
    price="&nbsp;1299.99元"
    origin-price="1599.99元"
    desc="描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息"
    title="平板电脑&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;2022-12-06"
    tag="新品"
    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
  >
    <template #tags>
      <div class="state">
        <van-icon name="shop-collect-o" /><span>已完成</span>
      </div>
    </template>
  </van-card>

  <van-card
    @click="ship"
    num="1"
    price="&nbsp;1299.99元"
    origin-price="1599.99元"
    desc="描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息"
    title="平板电脑&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;2022-12-06"
    tag="新品"
    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
  >
    <template #tags>
      <div class="state">
        <van-icon name="balance-pay" /><span>待付款</span>
      </div>
    </template>
  </van-card>

  <van-card
    @click="ship"
    num="1"
    price="&nbsp;1299.99元"
    origin-price="1599.99元"
    desc="描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息"
    title="平板电脑&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;2022-12-06"
    tag="新品"
    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
  >
    <template #tags>
      <div class="state"><van-icon name="failure" /><span>已失效</span></div>
    </template>
  </van-card>

  <van-card
    @click="ship"
    num="1"
    price="&nbsp;1299.99元"
    origin-price="1599.99元"
    desc="描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息"
    title="平板电脑&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;2022-12-06"
    tag="新品"
    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
  >
    <template #tags>
      <div class="state"><van-icon name="logistics" /><span>待发货</span></div>
    </template>
  </van-card>

  <van-card
    @click="ship"
    num="1"
    price="&nbsp;1299.99元"
    origin-price="1599.99元"
    desc="描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息"
    title="平板电脑&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;2022-12-06"
    tag="新品"
    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
  >
    <template #tags>
      <div class="state"><van-icon name="logistics" /><span>待发货</span></div>
    </template>
  </van-card>

  <van-card
    @click="ship"
    num="1"
    price="&nbsp;1299.99元"
    origin-price="1599.99元"
    desc="描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息"
    title="平板电脑&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;2022-12-06"
    tag="新品"
    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
  >
    <template #tags>
      <div class="state"><van-icon name="logistics" /><span>待发货</span></div>
    </template>
  </van-card>

  <van-card
    @click="ship"
    num="1"
    price="&nbsp;1299.99元"
    origin-price="1599.99元"
    desc="描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息"
    title="平板电脑&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;2022-12-06"
    tag="新品"
    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
  >
    <template #tags>
      <div class="state"><van-icon name="logistics" /><span>待发货</span></div>
    </template>
  </van-card>

  <van-card
    @click="ship"
    num="1"
    price="&nbsp;1299.99元"
    origin-price="1599.99元"
    desc="描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息"
    title="平板电脑&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;2022-12-06"
    tag="新品"
    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
  >
    <template #tags>
      <div class="state"><van-icon name="logistics" /><span>待发货</span></div>
    </template>
  </van-card>

  <van-card
    @click="ship"
    num="1"
    price="&nbsp;1299.99元"
    origin-price="1599.99元"
    desc="描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息"
    title="平板电脑&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;2022-12-06"
    tag="新品"
    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
  >
    <template #tags>
      <div class="state"><van-icon name="logistics" /><span>待发货</span></div>
    </template>
  </van-card>

  <van-card
    @click="ship"
    num="1"
    price="&nbsp;1299.99元"
    origin-price="1599.99元"
    desc="描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息"
    title="平板电脑&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;2022-12-06"
    tag="新品"
    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
  >
    <template #tags>
      <div class="state"><van-icon name="guide-o" /><span>待收货</span></div>
    </template>
  </van-card>

  <BottomContent></BottomContent>
  <backTop></backTop>
</template>

<script setup>
// 回到顶部
import backTop from "@/components/ZhiDing.vue";

// 底部内容
import BottomContent from "@/views/order/BottomContent.vue";
import { useRouter } from "vue-router";

const router = useRouter();

// 点击商品列表实现跳转
function ship() {
  router.push({
    path: "/users/order/details",
  });
}
</script>

<style lang="less" scoped>
.van-card {
  background-color: #fff;
  box-shadow: 0 0 1.5vw #333;
  margin-bottom: 8.067vw;
  .state {
    font-size: 1.6vw;
    color: #000;
    font-weight: 600;
    span {
      margin-left: 1.333vw;
    }
  }
}
h3 {
  text-align: center;
  font-size: 1.6vw;
  margin-top: -1.333vw;
  line-height: 1;
}
b {
  color: #fff;
}
:deep(.van-card__price) {
  color: rgb(255, 60, 80);
}
</style>
